<template>
    <div>
        <panle title='课程列表' content="课程列表"></panle>
        <el-form :inline="true" ref="form" :model="form" label-width="80px" style="margin: 20px;">
            <el-form-item label="课程名称" prop="name">
                <el-input placeholder="请输入课程名称" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" size="mini" >搜索</el-button>
                <el-button @click="resetForm('form')" size="mini" >重置</el-button>
            </el-form-item>
        </el-form>
        <div class="table-wrap">
            <el-table :data="tableData" :loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                stripe default-expand-all height="800">
                <el-table-column align="center" header-align="center" prop="id" label="ID" width="55"></el-table-column>
                <el-table-column align="center" header-align="center" prop="img" label="封面图">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.img" fit="fill" style="width: 60px;height: 60px;" @click="big(scope.row.img)"></el-image>
                    </template>
                </el-table-column>
                <el-table-column align="center" header-align="center" prop="detail_img" label="详情图">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.detail_img" fit="fill" style="width: 60px;height: 60px;" @click="big(scope.row.detail_img)"></el-image>
                    </template>
                </el-table-column>
                <el-table-column align="center" header-align="center" prop="name" label="课程名称"></el-table-column>
                <el-table-column align="center" header-align="center" prop="sale" label="原价"></el-table-column>
                <el-table-column align="center" header-align="center" prop="fee" label="现价"></el-table-column>
                <el-table-column align="center" header-align="center" prop="teacher" label="老师"></el-table-column>
                <el-table-column align="center" header-align="center" prop="zhangjie" label="章节"></el-table-column>
                <el-table-column align="center" header-align="center" prop="zaixue" label="在学人数"></el-table-column>
                <el-table-column align="center" header-align="center" prop="detail" label="教师简介"></el-table-column>
                <el-table-column align="center" header-align="center" prop="sort" label="排序"></el-table-column>
                <el-table-column align="center" header-align="center" prop="id" label="操作" v-if="isShow(['live:course:updatefee','live:course:copypay','live:course:copyorder'])" >
                    <template slot-scope="scope">
                        <PersButton type="text" size="mini" label="课程改价复制支付链接" perms="live:course:updatefee" @click="updatefee(scope.row)"  ></PersButton>
                        <PersButton type="text" size="mini" label="复制支付链接" perms="live:course:copypay"
                            @click="copy(scope.row.pay_url)"  ></PersButton>
                        <PersButton type="text" size="mini" label="复制订单列表链接" perms="live:course:copyorder"
                            @click="copy(scope.row.pay_order)"  ></PersButton>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="form.pageSize"
                    background layout="total, sizes, prev, pager, next, jumper" :total="form.total"> </el-pagination>
            </div>
        </div>
        <!-- 弹窗 -->
        <el-dialog v-dialogDrag :visible.sync="open" width="600px"  append-to-body title="课程改价复制支付链接">
            <el-form ref="updatepriceForm" :model="updatepriceForm" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="课程改价" prop="fee">
                            <el-input style="width:50%" v-model="updatepriceForm.fee" placeholder="请输入课程价格" size="small" />
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('updatepriceForm')" size="mini" >重置</el-button>
                <el-button style='background-color:red' v-if="updatepriceForm.link==''" :disabled="disabled" type="primary" @click="submitForm('submit')" size="small">{{updatepriceForm.msg}}</el-button>
                <el-button v-else type="primary" @click="submitForm('copy')" size="small">{{updatepriceForm.msg}}</el-button>
            </div>

        </el-dialog>

    </div>

     



</template>

<script>
    let _that;
	import Panle from '@/components/Panle';
    import {getCourseData,updateCourseFee} from '@/api/live/course';
    import PersButton from '@/components/PersButton';
    import {hasPermission, isShow} from '@/common/permission';
    export default {
        components:{
            Panle,
            PersButton
        },
        data() {
            return {
                tableData:[],
                open: false,
                 form:{
                    name:'',
                    pageSize: 10,
                    pageNumber: 1,
                    total: 0
                 },
                 updatepriceForm:{
                    id:0,
                    fee:0,
                    msg:"生成改价链接",
                    link:"",
                 },
                 disabled:false,
                 rules: {
					
					fee: [{
						required: true,
						message: "课程价格不能为空",
						trigger: "blur"
					}],
				},
            }
        },
        created(){
            _that = this;
			_that.init();
        },
        methods: {
            hasPermission,
            isShow,
            init(){
                _that.loading = true;
                console.log(_that.form);
				getCourseData(_that.form).then((res)=>{
					console.log(res);
					_that.tableData = res.data.list;
					_that.form.total = res.data.total;
					_that.loading = false;
				})
            },
            search: function() {
				_that.loading = true;
                _that.form.pageSize = 10;
				_that.form.pageNumber = 1;
				_that.init();
			},
			handleSizeChange: function(e) {
				console.log(e);
				_that.form.pageSize = e;
				_that.init();
			},
			handleCurrentChange: function(e) {
				console.log(e);
				_that.form.pageNumber = e;
				_that.init();
			},
            resetForm(formName) {
                _that.$refs[formName].resetFields();
                if(formName=='form'){
                    _that.init();
                }else if(formName=='updatepriceForm'){
                    _that.updatepriceForm.msg="生成改价链接";
                    _that.updatepriceForm.link="";
                    _that.disabled=false;
                }
            },
            copy:function(desc) {

                console.log(desc);
            const input = document.createElement('input');
            input.value = desc; // 获取要复制的文本
            document.body.appendChild(input);
            input.select(); // 选中文本
            document.execCommand('copy'); // 执行复制操作
            document.body.removeChild(input); // 移除临时的输入框
            // alert('文本已复制到剪贴板'); // 可选：给用户反馈
            _that.$notify({
                    message: '链接已复制到剪贴板',
                    type: 'success'
                });
            _that.open=false;

            },
            big:function(src){
                window.location.href = src;
            },
            updatefee:function(data){
                _that.updatepriceForm.id = data.id;
                _that.updatepriceForm.fee = data.fee;
                _that.updatepriceForm.link = '';
                _that.updatepriceForm.msg = '生成改价链接';
                _that.updatepriceForm.type = 'course';
				_that.open = true;
            },
            submitForm:function(type){
                if(type=='submit'){
                    this.disabled=true;
                    updateCourseFee(_that.updatepriceForm).then((res) => {
                        if (res.code == 200) {
                            _that.msgSuccess(res.msg);
                            _that.updatepriceForm.msg="复制改价链接";
                            _that.updatepriceForm.link=res.data.link;
                            _that.disabled=false;
                        } else {
                            _that.msgError(res.msg);
                            _that.disabled=false;
                        }
                    })
                }else if(type=='copy'){
                    _that.copy(_that.updatepriceForm.link);
                }
                
            }
        }
    }






</script>

<style>

    .search-content{
        width: 100%;
        margin: 20px;
    }

   

</style>